<!--
 * @Author: zhuxiaohang
 * @Date: 2023-11-20 14:35:10
 * @LastEditors: zhuxiaohang
 * @LastEditTime: 2023-12-29 00:40:38
 * @Description: file content
 * @FilePath: \co-prosperity-adoption-admin\src\views\restaurant\restaurantManage2\restaurantDialog.vue
-->
<template>
  <div class="divBox">
    <el-form ref="formValidate" :model="formValidate" label-width="170px" class="formValidate mt20">
      <el-form-item label="姓名：" prop="name" :rules="{ required: true, message: '请输入', trigger: 'blur' }">
        <el-input v-model="formValidate.name" placeholder="请输入" class="selWidth" clearable />
      </el-form-item>
      <el-form-item label="手机号：" prop="phone" :rules="{ required: true, message: '请输入', trigger: 'blur' }">
        <el-input v-model="formValidate.phone" placeholder="请输入" class="selWidth" clearable />
      </el-form-item>
      <el-form-item label="关系：" prop="relation" :rules="{ required: true, message: '请输入', trigger: 'blur' }">
        <el-input v-model="formValidate.relation" placeholder="请输入" class="selWidth" clearable />
      </el-form-item>


      <div class="bt">
        <el-button style="width:100px" type="primary" @click="submitForm('formValidate')">提交</el-button>
      </div>

    </el-form>

  </div>
</template>

<script>
import { addMember,getMemberInfo,editMember } from '@/api/village'

// import Tinymce from '@/components/Tinymce/index'
// import { string } from 'jszip/lib/support';
export default {
  // components: { Tinymce },
  props: {
    isCreate: {
      type: Number, //0-新增 1-编辑
    },
    selectItem: {
      type: Object,
      default: () => { }
    },
    hid: {
      type: String, //0-新增 1-编辑
    },
    categoryOptions: {
      type: Array
    }
  },
  watch: {},
  data() {
    return {
      keyUrl: undefined,
      time: undefined,//营业时间
      formValidate: {
        id:undefined,
        homeId: undefined,
        name: undefined,//套餐名称
        phone: undefined,//套餐价格
        relation: undefined,//小程序展示图片
      },
      dialogVisible: false
    }
  },
  created() {
    // this.getKey()
  },
  mounted() {
    this.$refs['formValidate'].resetFields();
    if (this.$route.query.id) {
      this.formValidate.homeId = this.$route.query.id
    }
    if (this.selectItem) {
      let data={
        id:this.selectItem.id
      }
      getMemberInfo(data).then(res => {
        this.formValidate = {
          id:res.id,
          homeId: this.hid,
          name: res.name,//套餐名称
          phone: res.phone,//套餐价格
          relation: res.relation,//小程序展示图片

        }
      })
    }
  },
  methods: {

    // 点击商品图
    modalPicTap(tit, num, i) {
      const _this = this
      this.$modalUpload(function (img) {
        if (tit === '2' && !num) {
          if (img.length > 1) return this.$message.warning('最多选择1张图片！')
          _this.formValidate.image = img[0].sattDir
        }
        if (tit === '3' && !num) {
          if (img.length > 10) return this.$message.warning('最多选择10张图片！')
          if (img.length + _this.formValidate.sliderImage.length > 10) return this.$message.warning('最多选择10张图片！')
          console.log(5555, _this.formValidate.sliderImage)
          img.map((item) => {
            _this.formValidate.sliderImage.push(item.sattDir)
          })
        }
      }, tit, 'content')
    },
    // 移动
    handleDragStart(e, item) {
      this.dragging = item
    },
    handleDragEnd(e, item) {
      this.dragging = null
    },
    handleDragOver(e) {
      e.dataTransfer.dropEffect = 'move'
    },
    handleDragEnter(e, item, name) {
      e.dataTransfer.effectAllowed = 'move'
      if (item === this.dragging) {
        return
      }
      if (name === 3) {
        const newItems = [...this.formValidate.sliderImage]
        const src = newItems.indexOf(this.dragging)
        const dst = newItems.indexOf(item)
        newItems.splice(dst, 0, ...newItems.splice(src, 1))
        this.formValidate.sliderImage = newItems
      }
      // if (name === 2) {
      //   const newItems = [...this.formValidate.image]
      //   const src = newItems.indexOf(this.dragging)
      //   const dst = newItems.indexOf(item)
      //   newItems.splice(dst, 0, ...newItems.splice(src, 1))
      //   this.formValidate.image = newItems
      // }
    },

    // 删除图片
    handleRemove(i, name) {
      if (name === 2) {
        this.formValidate.image.splice(i, 1)
      }
      if (name === 3) {
        this.formValidate.sliderImage.splice(i, 1)
      }
    },

    // 保存提交
    submitForm() {

      if (this.isCreate === 0) {//新增
        this.$refs.formValidate.validate(valid => {
          if (valid) {
            addMember(this.formValidate).then(res => {
              this.$message.success('提交成功')
              this.$emit('getList')
              this.$emit('close')
            })
          }
        })
      }

      if (this.isCreate === 1) {//编辑
        this.$refs.formValidate.validate(valid => {
          if (valid) {
            editMember(this.formValidate).then(res => {
              this.$message.success('提交成功')
              this.$emit('getList')
              this.$emit('close')
            })
          }
        })
      }

    },

    //添加标签
    handlerAddTags() {
      this.formValidate.item.push({ name: undefined, num: undefined, price: undefined, count: undefined })
    },
    //删除标签
    handlerDeleteTags(index) {
      this.formValidate.item.splice(index, 1)
    },
  }
}
</script>

<style lang="scss" scoped>
.divBox {
  .title {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .pictrue {
    width: 60px;
    height: 60px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    margin-right: 10px;
    position: relative;
    cursor: pointer;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .btndel {
    position: absolute;
    z-index: 1;
    width: 20px !important;
    height: 20px !important;
    left: 46px;
    top: -4px;
  }

  .bt {
    width: 80%;
    display: flex;
    justify-content: center;
    margin: 20px 0;
  }

  .tags {
    width: 100%;

    // display: flex;
    // flex-wrap: wrap;
    .tagsInner {
      display: block;
      width: 300px;
    }
  }
}
</style>
<style lang="scss">
.el-input-group__append,
.el-input-group__prepend {
  background-color: #1890ff !important;
  color: #fff !important;
  border-color: #1890ff !important;
  border-radius: 0 4px 4px 0;
}
</style>
